<template>
    <div class="swipreBox">
        <span class="swnum" v-if="imgs.length>1">{{index+1}}/{{imgs.length}}</span>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :show-indicators="false" @change="getCurIndex">
            <van-swipe-item v-for="dt in imgs" :key="dt">
                <Image :url='dt'/>
            </van-swipe-item>
        </van-swipe>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import { Swipe as vanSwipe, SwipeItem as vanSwipeItem } from 'vant';
import Image from '@/components/image.vue'
export default {
    components:{
        vanSwipe,
        vanSwipeItem,
        Image,
    },
    props:{
        imgs:{
            type:Array,
            default:[]
        }
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            index:0
        })

        const getCurIndex = (index)=>{ // index从0开始
            state.index = index
        }

        return{
            ...toRefs(state),
            getCurIndex
        }
    }
}
</script>

<style lang="scss" scoped>
    .swipreBox{
        position: relative;
        z-index: 10;
        width: 100%;
        height: 100%;
        .my-swipe{
            width: 100%;
            height: 100%;
        }
        .swnum{
            font-size: 28px;
            position: absolute;
            z-index: 10;
            bottom: 10px;
            right: 20px;
            color: #67F8FF;
        }
    }
</style>